import React from 'react';
import '../../../css/Home.css';
import { withRouter } from 'react-router-dom';
import {
  Typography,
  Divider,
  Empty,
  Descriptions,
  Space,
  Popconfirm,
  Button,
  Modal,
  Form,
  Input,
  InputNumber,
  Row,
  Col,
  message,
  Radio,
  DatePicker,
} from 'antd';
import {
  PlusOutlined,
  HighlightOutlined,
  DeleteOutlined,
  FormOutlined,
  RedoOutlined,
} from '@ant-design/icons';
import TableCom from '../../../Component/tableCompoment/index';
import Cookie from 'js-cookie';
const { Title } = Typography;
let time;
class projectStatements extends React.Component {
  formRef = React.createRef();
  constructor() {
    super();
    this.state = {
      btnStyle: 'button-color-daybreak',
      summaryData: [
        {
          title: '合同金额',
          filedName: '合同金额',
        },
        {
          title: '开票合计',
          filedName: '开票合计',
        },
        {
          title: '到款合计',
          filedName: '到款合计',
        },
        {
          title: '付款合计',
          filedName: '付款合计',
        },
        {
          title: '扣税合计',
          filedName: '扣税合计',
        },
        {
          title: '管理费合计',
          filedName: '管理费合计',
        },
        {
          title: '管理费',
          filedName: '管理费',
        },
        {
          title: '合同余额',
          filedName: '合同余额',
        },
        {
          title: '余额',
          filedName: '余额',
        },
      ], //汇总详情数据
      makeTicketData: [
        {
          title: '金额合计',
          filedName: '金额合计',
        },
        {
          title: '销项税额',
          filedName: '销项税额',
        },
      ], //甲方开票明细
      beforePayData: [
        {
          title: '预缴合计',
          filedName: '预缴合计',
        },
      ], //项目所在地预缴数据
      manageFeeData: [
        {
          title: '管理费合计',
          filedName: '管理费合计',
        },
      ], //管理费数据
      payinData: [
        {
          title: '到款合计',
          filedName: '到款合计',
        },
      ], //到款数据
      payoutData: [
        {
          title: '付款合计',
          filedName: '付款合计',
        },
      ], //付款数据
      invoiceData: [
        {
          title: '发票合计',
          filedName: '发票合计',
        },
        {
          title: '税额合计',
          filedName: '税额合计',
        },
      ], //发票数据
      taxData: [
        {
          title: '企业所得税',
          filedName: '企业所得税',
        },
        {
          title: '合计',
          filedName: '合计',
        },
      ],
      contractData: [
        {
          title: '采购合计',
          filedName: '采购合计',
        },
        {
          title: '主合同总金额',
          filedName: '主合同总金额',
        },
      ],
      beforePay: false, //项目所在地预缴判定
      makeTicketTableData: [], //给甲方开票明细数据
      manageFeeTableData: [], //预缴表格数据
      manageFeeTableData: [], //管理费表格数据
      projectPayinTableData: [], //工程款到款表格数据
      outmoneyInTableData: [], //往来款到款表格数据
      payoutTableData: [], //付款表格数据
      outmoneyOutTableData: [], //往来款付款表格数据
      invoiceTableData: [], //发票明细表格数据
      contractTableData: [], //合同表格数据
      taxTableData: [],
      makeTicketColumn: [
        {
          title: '开票时间',
          dataIndex: 'makeTicketTime',
          key: 'makeTicketTime',
        },
        {
          title: '金额',
          dataIndex: 'money',
          key: 'money',
        },
        {
          title: '税率',
          dataIndex: 'rate',
          key: 'rate',
        },
        {
          title: '销项税额',
          dataIndex: 'outputTag',
          key: 'outputTag',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: (_, record) =>
            this.state.makeTicketTableData.length >= 1 ? (
              <Space>
                <Popconfirm
                  cancelText="取消"
                  okText="确定"
                  title="确定删除此条数据吗?"
                  onConfirm={() => this.handleDelete(record.key)}
                >
                  <Button
                    icon={<DeleteOutlined />}
                    className={this.state.btnStyle + ' ' + 'button-noback'}
                  >
                    删除
                  </Button>
                </Popconfirm>
                <Button
                  onClick={this.handleEdit.bind(this, record)}
                  icon={<FormOutlined />}
                  className={this.state.btnStyle + ' ' + 'button-noback'}
                >
                  修改
                </Button>
              </Space>
            ) : null,
        },
      ], //表头
      beforePayColumn: [
        {
          title: '预缴时间',
          dataIndex: 'beforePayTime',
          key: 'beforePayTime',
        },
        {
          title: '预缴进项',
          dataIndex: 'beforePayInput',
          key: 'beforePayInput',
        },
        {
          title: '预缴增值税附加',
          dataIndex: 'beforePayVatAdd',
          key: 'beforePayVatAdd',
        },
        {
          title: '印花税',
          dataIndex: 'stampDuty',
          key: 'stampDuty',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: (_, record) =>
            this.state.makeTicketTableData.length >= 1 ? (
              <Space>
                <Popconfirm
                  cancelText="取消"
                  okText="确定"
                  title="确定删除此条数据吗?"
                  onConfirm={() => this.handleDelete(record.key)}
                >
                  <Button
                    icon={<DeleteOutlined />}
                    className={this.state.btnStyle + ' ' + 'button-noback'}
                  >
                    删除
                  </Button>
                </Popconfirm>
                <Button
                  onClick={this.handleEdit.bind(this, record)}
                  icon={<FormOutlined />}
                  className={this.state.btnStyle + ' ' + 'button-noback'}
                >
                  修改
                </Button>
              </Space>
            ) : null,
        },
      ], //预缴表头
      manageFeeColumn: [
        {
          title: '缴纳次数',
          dataIndex: 'payNum',
          key: 'payNum',
        },
        {
          title: '应收金额',
          dataIndex: 'shouldReceive',
          key: 'shouldReceive',
        },
        {
          title: '扣费时间',
          dataIndex: 'deductionTime',
          key: 'deductionTime',
        },
        {
          title: '备注',
          dataIndex: 'node',
          key: 'node',
        },
      ], //管理费表头
      payinColumn: [
        {
          title: '到款时间',
          dataIndex: 'payinTime',
          key: 'payinTime',
        },
        {
          title: '到款金额',
          dataIndex: 'payinMoney',
          key: 'payinMoney',
        },
        {
          title: '打款人',
          dataIndex: 'payName',
          key: 'payName',
        },
        {
          title: '备注',
          dataIndex: 'node',
          key: 'node',
        },
      ], //到款表头
      payoutColumn: [
        {
          title: '付款时间',
          dataIndex: 'payoutTime',
          key: 'payoutTime',
        },
        {
          title: '付款金额',
          dataIndex: 'payoutMoney',
          key: 'payoutMoney',
        },
        {
          title: '收款人',
          dataIndex: 'payee',
          key: 'payee',
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
        },
        {
          title: '备注',
          dataIndex: 'node',
          key: 'node',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: (_, record) =>
            this.state.makeTicketTableData.length >= 1 ? (
              <Space>
                <Popconfirm
                  cancelText="取消"
                  okText="确定"
                  title="确定删除此条数据吗?"
                  onConfirm={() => this.handleDelete(record.key)}
                >
                  <Button
                    icon={<DeleteOutlined />}
                    className={this.state.btnStyle + ' ' + 'button-noback'}
                  >
                    删除
                  </Button>
                </Popconfirm>
                <Button
                  onClick={this.handleEdit.bind(this, record)}
                  icon={<FormOutlined />}
                  className={this.state.btnStyle + ' ' + 'button-noback'}
                >
                  修改
                </Button>
                <Button
                  icon={<HighlightOutlined />}
                  className={this.state.btnStyle + ' ' + 'button-noback'}
                >
                  审批
                </Button>
              </Space>
            ) : null,
        },
      ], //付款表头
      outmoneyOutColumn: [
        {
          title: '付款时间',
          dataIndex: 'payoutTime',
          key: 'payoutTime',
        },
        {
          title: '付款金额',
          dataIndex: 'payoutMoney',
          key: 'payoutMoney',
        },
        {
          title: '收款人',
          dataIndex: 'payee',
          key: 'payee',
        },
        {
          title: '备注',
          dataIndex: 'node',
          key: 'node',
        },
      ],
      invoiceColumn: [
        {
          title: '收票时间',
          dataIndex: 'getTicketTime',
          key: 'getTicketTime',
        },
        {
          title: '发票金额',
          dataIndex: 'ticketMoney',
          key: 'ticketMoney',
        },
        {
          title: '发票单位',
          dataIndex: 'ticketCompany',
          key: 'ticketCompany',
        },
        {
          title: '票种',
          dataIndex: 'ticket',
          key: 'ticket',
        },
        {
          title: '税率',
          dataIndex: 'rate',
          key: 'rate',
        },
        {
          title: '进项',
          dataIndex: 'inputs',
          key: 'inputs',
        },
        {
          title: '备注',
          dataIndex: 'node',
          key: 'node',
        },
      ],
      taxColumn: [
        {
          title: '年月份',
          dataIndex: 'date',
          key: 'date',
        },
        {
          title: '增值税',
          dataIndex: 'vatTax',
          key: 'vatTax',
        },
        {
          title: '增值税附加',
          dataIndex: 'vatTaxAdd',
          key: 'vatTaxAdd',
        },
        {
          title: '印花税',
          dataIndex: 'stampDuty',
          key: 'stampDuty',
        },
        {
          title: '企业所得税',
          dataIndex: 'incomeTax',
          key: 'incomeTax',
        },
        {
          title: '企业扣税时间',
          dataIndex: 'deductTime',
          key: 'deductTime',
        },
        {
          title: '扣税率',
          dataIndex: 'deductRate',
          key: 'deductRate',
        },
        {
          title: '合计',
          dataIndex: 'sum',
          key: 'sum',
        },
        {
          title: '备注',
          dataIndex: 'node',
          key: 'node',
        },
        {
          title: '个税',
          dataIndex: 'personTax',
          key: 'personTax',
        },
        {
          title: '个税率',
          dataIndex: 'personTaxRate',
          key: 'personTaxRate',
        },
      ],
      contractColumn: [
        {
          title: '序号',
          dataIndex: 'num',
          key: 'num',
        },
        {
          title: '合同签订日期',
          dataIndex: 'signDate',
          key: 'signDate',
        },
        {
          title: '合同金额',
          dataIndex: 'contractAmount',
          key: 'contractAmount',
        },
        {
          title: '供应商单位',
          dataIndex: 'supplier',
          key: 'supplier',
        },
        {
          title: '供应内容',
          dataIndex: 'supplyCont',
          key: 'supplyCont',
        },
        {
          title: '已开票金额',
          dataIndex: 'makeTicketMoney',
          key: 'makeTicketMoney',
        },
        {
          title: '剩余未开票金额',
          dataIndex: 'remainMoney',
          key: 'remainMoney',
        },
        {
          title: '已付款金额',
          dataIndex: 'hasPayMoney',
          key: 'hasPayMoney',
        },
        {
          title: '剩余未付款金额',
          dataIndex: 'remainUnpayMoney',
          key: 'remainUnpayMoney',
        },
        {
          title: '备注',
          dataIndex: 'node',
          key: 'node',
        },
      ],
      top: 'none', //顶部是否有分页器及分页器位置
      bottom: 'bottomCenter', //底部是否有分页器及分页器位置
      modalTitle: '', //modal标题
      visible: false, //是否显示modal
      confirmLoading: false, //确定延时，异步回调
      layout: {
        //表单位置
        labelCol: { span: 12 },
        wrapperCol: { span: 16 },
      },
    };
  }
  //渲染汇总详情数据
  renderSummary = list => {
    return list.map(item => {
      return (
        <Descriptions.Item key={item.title} label={item.title}>
          {item.filedName}
        </Descriptions.Item>
      );
    });
  };
  //修改
  handleEdit = val => {};
  //新增
  handleAdd = val => {
    const visible = true,
      modalTitle = '新增' + val;
    this.setState({
      visible,
      modalTitle,
    });
  };
  //新增项目所在地预缴
  handleAddBeforePay = () => {
    // beforePay
    let beforePay = true;
    this.setState({
      beforePay,
    });
  };
  //modal框点击确认
  handleOk = () => {
    this.formRef.current
      .validateFields()
      .then(values => {
        console.log(values);
        this.formRef.current.resetFields();
        this.setState({
          visible: false,
        });
      })
      .catch(info => {
        message.error('请正确填写数据!');
      });
  };
  //modal点击取消
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };
  //日期选择器变化
  onChange = (date, dateString) => {
    console.log(date, dateString);
  };
  //渲染modal框里面的内容
  renderModal = () => {
    let { modalTitle, layout } = this.state;
    switch (modalTitle) {
      case '新增给甲方开票':
        return (
          <>
            <Form {...layout} ref={this.formRef}>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="makeTicketTime"
                    label="开票时间"
                    rules={[
                      {
                        required: true,
                        message: '开票时间不能为空',
                      },
                    ]}
                  >
                    <DatePicker onChange={this.onChange} />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="makeTicketMoney"
                    label="开票金额"
                    rules={[
                      {
                        required: true,
                        message: '开票金额不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="rate"
                    label="税率"
                    rules={[
                      {
                        required: true,
                        message: '税率不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </>
        );
      case '新增项目所在地预缴':
        return (
          <>
            <Form {...layout} ref={this.formRef}>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="yujiaoTime"
                    label="预缴时间"
                    rules={[
                      {
                        required: true,
                        message: '预缴时间不能为空',
                      },
                    ]}
                  >
                    <DatePicker onChange={this.onChange} />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="yujiaojinxiangMoney"
                    label="预缴进项"
                    rules={[
                      {
                        required: true,
                        message: '预缴进项不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="rateadd"
                    label="预缴增值税附加"
                    rules={[
                      {
                        required: true,
                        message: '预缴增值税附加不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="yinghuashui"
                    label="印花税"
                    rules={[
                      {
                        required: true,
                        message: '印花税不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </>
        );
      case '新增管理费':
        return (
          <>
            <Form {...layout} ref={this.formRef}>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="yujiaoTime"
                    label="应收金额"
                    rules={[
                      {
                        required: true,
                        message: '应收金额不能为空',
                      },
                    ]}
                  >
                    <InputNumber />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="yujiaojinxiangMoney"
                    label="扣费时间"
                    rules={[
                      {
                        required: true,
                        message: '扣费时间不能为空',
                      },
                    ]}
                  >
                    <DatePicker onChange={this.onChange} />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item name="node" label="备注">
                    <Input.TextArea />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </>
        );
      case '新增工程款到款':
        return (
          <>
            <Form {...layout} ref={this.formRef}>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="daokuanTime"
                    label="到款时间"
                    rules={[
                      {
                        required: true,
                        message: '到款时间不能为空',
                      },
                    ]}
                  >
                    <InputNumber />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="daokuanjineMoney"
                    label="到款金额"
                    rules={[
                      {
                        required: true,
                        message: '到款金额不能为空',
                      },
                    ]}
                  >
                    <InputNumber />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="dakuanren"
                    label="打款人"
                    rules={[
                      {
                        required: true,
                        message: '打款人不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item name="node" label="备注">
                    <Input.TextArea />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </>
        );
      case '新增往来款到款':
        return (
          <>
            <Form {...layout} ref={this.formRef}>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="daokuanTime"
                    label="到款时间"
                    rules={[
                      {
                        required: true,
                        message: '到款时间不能为空',
                      },
                    ]}
                  >
                    <DatePicker onChange={this.onChange} />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="daokuanjineMoney"
                    label="到款金额"
                    rules={[
                      {
                        required: true,
                        message: '到款金额不能为空',
                      },
                    ]}
                  >
                    <InputNumber />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="dakuanren"
                    label="打款人"
                    rules={[
                      {
                        required: true,
                        message: '打款人不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item name="node" label="备注">
                    <Input.TextArea />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </>
        );
      case '新增付款':
        return (
          <>
            <Form {...layout} ref={this.formRef}>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="fukuanTime"
                    label="付款时间"
                    rules={[
                      {
                        required: true,
                        message: '付款时间不能为空',
                      },
                    ]}
                  >
                    <InputNumber />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="fukuanMoney"
                    label="付款金额"
                    rules={[
                      {
                        required: true,
                        message: '付款金额不能为空',
                      },
                    ]}
                  >
                    <InputNumber />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="shoukuanren"
                    label="收款人"
                    rules={[
                      {
                        required: true,
                        message: '收款人不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item name="status" label="状态">
                    <Radio.Group>
                      <Radio value="1">已申请</Radio>
                      <Radio value="2">已通过</Radio>
                      <Radio value="3">已拒绝</Radio>
                    </Radio.Group>
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item name="node" label="备注">
                    <Input.TextArea />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </>
        );
      case '新增往来款付款':
        return (
          <>
            <Form {...layout} ref={this.formRef}>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="fukuanTime"
                    label="付款时间"
                    rules={[
                      {
                        required: true,
                        message: '付款时间不能为空',
                      },
                    ]}
                  >
                    <DatePicker onChange={this.onChange} />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="fukuanMoney"
                    label="付款金额"
                    rules={[
                      {
                        required: true,
                        message: '付款金额不能为空',
                      },
                    ]}
                  >
                    <InputNumber />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="shoukuanren"
                    label="收款人"
                    rules={[
                      {
                        required: true,
                        message: '收款人不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item name="node" label="备注">
                    <Input.TextArea />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </>
        );
      case '新增收到发票明细':
        return (
          <>
            <Form {...layout} ref={this.formRef}>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="fukuanTime"
                    label="收票时间"
                    rules={[
                      {
                        required: true,
                        message: '收票时间不能为空',
                      },
                    ]}
                  >
                    <DatePicker onChange={this.onChange} />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="fukuanMoney"
                    label="发票金额"
                    rules={[
                      {
                        required: true,
                        message: '发票金额不能为空',
                      },
                    ]}
                  >
                    <InputNumber />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="shoukuanren"
                    label="发票单位"
                    rules={[
                      {
                        required: true,
                        message: '发票单位不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="node"
                    label="票种"
                    rules={[
                      {
                        required: true,
                        message: '票种不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="shoukuanren"
                    label="税率"
                    rules={[
                      {
                        required: true,
                        message: '税率不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item name="node" label="备注">
                    <InputNumber />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </>
        );
      case '新增税金明细':
        return (
          <>
            <Form {...layout} ref={this.formRef}>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="Time"
                    label="年月份"
                    rules={[
                      {
                        required: true,
                        message: '年月份不能为空',
                      },
                    ]}
                  >
                    <DatePicker onChange={this.onChange} picker="month" />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="zengzhiTax"
                    label="增值税"
                    rules={[
                      {
                        required: true,
                        message: '增值税不能为空',
                      },
                    ]}
                  >
                    <InputNumber />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="yinghuaTax"
                    label="印花税"
                    rules={[
                      {
                        required: true,
                        message: '印花税不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="qiyesuodeTax"
                    label="企业所得税"
                    rules={[
                      {
                        required: true,
                        message: '企业所得税不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="cuttaxTime"
                    label="企业扣税时间"
                    rules={[
                      {
                        required: true,
                        message: '企业扣税时间不能为空',
                      },
                    ]}
                  >
                    <DatePicker onChange={this.onChange} />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="qishuiTax"
                    label="企税率"
                    rules={[
                      {
                        required: true,
                        message: '企税率不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item name="cuttaxTime" label="个税">
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item name="qishuiTax" label="个税率">
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item name="node" label="备注">
                    <Input.TextArea />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </>
        );
      case '新增对应合同':
        return (
          <>
            <Form {...layout} ref={this.formRef}>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="Time"
                    label="合同签订日期"
                    rules={[
                      {
                        required: true,
                        message: '合同签订日期不能为空',
                      },
                    ]}
                  >
                    <DatePicker onChange={this.onChange} />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="zengzhiTax"
                    label="合同金额"
                    rules={[
                      {
                        required: true,
                        message: '合同金额不能为空',
                      },
                    ]}
                  >
                    <InputNumber />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="yinghuaTax"
                    label="供应商单位"
                    rules={[
                      {
                        required: true,
                        message: '供应商单位不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="qiyesuodeTax"
                    label="供应内容"
                    rules={[
                      {
                        required: true,
                        message: '供应内容不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="cuttaxTime"
                    label="已开票金额"
                    rules={[
                      {
                        required: true,
                        message: '已开票金额不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="qishuiTax"
                    label="剩余未开票金额"
                    rules={[
                      {
                        required: true,
                        message: '剩余未开票金额不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item
                    name="cuttaxTime"
                    label="已付款金额"
                    rules={[
                      {
                        required: true,
                        message: '已开票金额不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span="12">
                  <Form.Item
                    name="qishuiTax"
                    label="剩余未付款金额"
                    rules={[
                      {
                        required: true,
                        message: '已开票金额不能为空',
                      },
                    ]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col span="12">
                  <Form.Item name="node" label="备注">
                    <Input.TextArea />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </>
        );
      default:
        break;
    }
  };
  render() {
    let hasData = true;
    const {
      summaryData,
      beforePay,
      makeTicketColumn,
      makeTicketTableData,
      top,
      bottom,
      beforePayColumn,
      beforePayTableData,
      makeTicketData,
      beforePayData,
      manageFeeColumn,
      manageFeeData,
      manageFeeTableData,
      payinColumn,
      payinData,
      projectPayinTableData,
      outmoneyInTableData,
      payoutColumn,
      payoutData,
      payoutTableData,
      outmoneyOutColumn,
      outmoneyOutTableData,
      invoiceColumn,
      invoiceData,
      invoiceTableData,
      taxColumn,
      taxData,
      taxTableData,
      contractColumn,
      contractTableData,
      contractData,
      modalTitle,
      visible,
      confirmLoading,
    } = this.state;
    if (!this.props.location.state) hasData = false;
    return (
      <>
        {hasData ? (
          <div className="billCont">
            <Title className="alignCenter">
              {this.props.location.state ? this.props.location.state.projectFlag.projectName : ''}
              对账单
            </Title>
            <Divider orientation="left">汇总详情</Divider>
            <Descriptions
              bordered
              layout="vertical"
              column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
            >
              {this.renderSummary(summaryData)}
            </Descriptions>
            <Divider orientation="left">开票详情</Divider>
            <div className="clear">
              <div className="floatLeft w50 padR30">
                <Title level={5}>给甲方开票明细</Title>
                <div className="topOperation">
                  <Space>
                    <Button
                      type="primary"
                      onClick={this.handleAdd.bind(this, '给甲方开票')}
                      icon={<PlusOutlined />}
                    >
                      新增
                    </Button>
                    <Popconfirm
                      cancelText="取消"
                      okText="确定"
                      title="确定添加项目所在地预缴吗?"
                      onConfirm={() => this.handleAddBeforePay()}
                    >
                      <Button type="primary" icon={<PlusOutlined />}>
                        新增项目所在地预缴
                      </Button>
                    </Popconfirm>
                  </Space>
                </div>
                <TableCom
                  tableColumns={makeTicketColumn}
                  tableData={makeTicketTableData}
                  top={top}
                  bottom={bottom}
                  isSelect={false}
                ></TableCom>
                <Descriptions bordered column={{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }}>
                  {this.renderSummary(makeTicketData)}
                </Descriptions>
              </div>
              <div className="floatLeft w50 padR30">
                {beforePay ? (
                  <>
                    <Title level={5}>项目所在地预缴开票明细</Title>
                    <div className="topOperation">
                      <Space>
                        <Button
                          type="primary"
                          onClick={this.handleAdd.bind(this, '项目所在地预缴')}
                          icon={<PlusOutlined />}
                        >
                          新增
                        </Button>
                      </Space>
                    </div>
                    <TableCom
                      tableColumns={beforePayColumn}
                      tableData={beforePayTableData}
                      top={top}
                      bottom={bottom}
                      isSelect={false}
                    ></TableCom>
                    <Descriptions bordered column={{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }}>
                      {this.renderSummary(beforePayData)}
                    </Descriptions>
                  </>
                ) : (
                  ''
                )}
              </div>
            </div>
            <Divider orientation="left">管理费详情</Divider>
            <div className="clear">
              <div className="floatLeft w50 padR30">
                <Title level={5}>管理费</Title>
                <div className="topOperation">
                  <Space>
                    <Button
                      type="primary"
                      onClick={this.handleAdd.bind(this, '管理费')}
                      icon={<PlusOutlined />}
                    >
                      新增
                    </Button>
                  </Space>
                </div>
                <TableCom
                  tableColumns={manageFeeColumn}
                  tableData={manageFeeTableData}
                  top={top}
                  bottom={bottom}
                  isSelect={false}
                ></TableCom>
                <Descriptions bordered column={{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }}>
                  {this.renderSummary(manageFeeData)}
                </Descriptions>
              </div>
            </div>
            <Divider orientation="left">到款明细</Divider>
            <div className="clear">
              <div className="floatLeft w50 padR30">
                <Title level={5}>工程款到款</Title>
                <div className="topOperation">
                  <Space>
                    <Button
                      type="primary"
                      onClick={this.handleAdd.bind(this, '工程款到款')}
                      icon={<PlusOutlined />}
                    >
                      新增
                    </Button>
                  </Space>
                </div>
                <TableCom
                  tableColumns={payinColumn}
                  tableData={projectPayinTableData}
                  top={top}
                  bottom={bottom}
                  isSelect={false}
                ></TableCom>
                <Descriptions bordered column={{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }}>
                  {this.renderSummary(payinData)}
                </Descriptions>
              </div>
              <div className="floatLeft w50 padR30">
                <Title level={5}>往来款到款</Title>
                <div className="topOperation">
                  <Space>
                    <Button
                      type="primary"
                      onClick={this.handleAdd.bind(this, '往来款到款')}
                      icon={<PlusOutlined />}
                    >
                      新增
                    </Button>
                  </Space>
                </div>
                <TableCom
                  tableColumns={payinColumn}
                  tableData={outmoneyInTableData}
                  top={top}
                  bottom={bottom}
                  isSelect={false}
                ></TableCom>
                <Descriptions bordered column={{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }}>
                  {this.renderSummary(payinData)}
                </Descriptions>
              </div>
            </div>
            <Divider orientation="left">付款明细</Divider>
            <div className="clear">
              <div className="floatLeft w50 padR30">
                <Title level={5}>付款</Title>
                <div className="topOperation">
                  <Space>
                    <Button
                      type="primary"
                      onClick={this.handleAdd.bind(this, '付款')}
                      icon={<PlusOutlined />}
                    >
                      新增
                    </Button>
                  </Space>
                </div>
                <TableCom
                  tableColumns={payoutColumn}
                  tableData={payoutTableData}
                  top={top}
                  bottom={bottom}
                  isSelect={false}
                ></TableCom>
                <Descriptions bordered column={{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }}>
                  {this.renderSummary(payoutData)}
                </Descriptions>
              </div>
              <div className="floatLeft w50 padR30">
                <Title level={5}>往来款付款</Title>
                <div className="topOperation">
                  <Space>
                    <Button
                      type="primary"
                      onClick={this.handleAdd.bind(this, '往来款付款')}
                      icon={<PlusOutlined />}
                    >
                      新增
                    </Button>
                  </Space>
                </div>
                <TableCom
                  tableColumns={outmoneyOutColumn}
                  tableData={outmoneyOutTableData}
                  top={top}
                  bottom={bottom}
                  isSelect={false}
                ></TableCom>
                <Descriptions bordered column={{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }}>
                  {this.renderSummary(payoutData)}
                </Descriptions>
              </div>
            </div>
            <Divider orientation="left">收到发票明细</Divider>
            <div className="clear">
              <div className="floatLeft w100 padR30">
                <Title level={5}>发票</Title>
                <div className="topOperation">
                  <Space>
                    <Button
                      type="primary"
                      onClick={this.handleAdd.bind(this, '收到发票明细')}
                      icon={<PlusOutlined />}
                    >
                      新增
                    </Button>
                  </Space>
                </div>
                <TableCom
                  tableColumns={invoiceColumn}
                  tableData={invoiceTableData}
                  top={top}
                  bottom={bottom}
                  isSelect={false}
                ></TableCom>
                <Descriptions bordered column={{ xxl: 4, xl: 3, lg: 3, md: 2, sm: 2, xs: 1 }}>
                  {this.renderSummary(invoiceData)}
                </Descriptions>
              </div>
            </div>
            <Divider orientation="left">税金明细</Divider>
            <div className="clear">
              <div className="floatLeft w100 padR30">
                <div className="topOperation">
                  <Space>
                    <Button
                      type="primary"
                      onClick={this.handleAdd.bind(this, '税金明细')}
                      icon={<PlusOutlined />}
                    >
                      新增
                    </Button>
                  </Space>
                </div>
                <TableCom
                  tableColumns={taxColumn}
                  tableData={taxTableData}
                  top={top}
                  bottom={bottom}
                  isSelect={false}
                ></TableCom>
                <Descriptions bordered column={{ xxl: 4, xl: 3, lg: 3, md: 2, sm: 2, xs: 1 }}>
                  {this.renderSummary(taxData)}
                </Descriptions>
              </div>
            </div>
            <Divider orientation="left">对应合同</Divider>
            <div className="clear">
              <div className="floatLeft w100 padR30">
                <div className="topOperation">
                  <Space>
                    <Button
                      type="primary"
                      onClick={this.handleAdd.bind(this, '对应合同')}
                      icon={<PlusOutlined />}
                    >
                      新增
                    </Button>
                  </Space>
                </div>
                <TableCom
                  tableColumns={contractColumn}
                  tableData={contractTableData}
                  top={top}
                  bottom={bottom}
                  isSelect={false}
                ></TableCom>
                <Descriptions bordered column={{ xxl: 4, xl: 3, lg: 3, md: 2, sm: 2, xs: 1 }}>
                  {this.renderSummary(contractData)}
                </Descriptions>
              </div>
            </div>
          </div>
        ) : (
          <Empty description="对不起，您打开的方式不对，暂时没有数据哦！"></Empty>
        )}
        <Modal
          okText={'确定'}
          cancelText={'取消'}
          title={modalTitle}
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
          destroyOnClose={true}
        >
          {this.renderModal()}
        </Modal>
      </>
    );
  }
  componentDidMount() {
    let makeTicketTableData = [
      { key: 1, makeTicketTime: '2021-2-24', money: '200', rate: '15 % ', outputTag: '26.08' },
    ];
    let beforePayTableData = [
      {
        key: 1,
        beforePayTime: '2021-2-24',
        beforePayInput: '12',
        beforePayVatAdd: '465',
        stampDuty: '98',
      },
    ];
    let manageFeeTableData = [
      {
        key: 1,
        payNum: '12',
        shouldReceive: '12',
        deductionTime: '2021-2-24',
        node: '管理费',
      },
    ];
    let projectPayinTableData = [
      {
        key: 1,
        payinTime: '2021-2-24',
        payinMoney: '1212',
        payName: '张丹',
        node: '工程款付款',
      },
    ];
    let outmoneyInTableData = [
      {
        key: 1,
        payinTime: '2021-2-24',
        payinMoney: '7765',
        payName: '王鑫',
        node: '往来款付款',
      },
    ];
    let payoutTableData = [
      {
        key: 1,
        payoutTime: '2021-2-24',
        payoutMoney: '100',
        payee: '张无忌',
        status: '1',
        node: '付款了',
      },
    ];
    let outmoneyOutTableData = [
      {
        key: 1,
        payoutTime: '2021-2-24',
        payoutMoney: '456',
        payee: '钟无艳',
        node: '已付款了',
      },
    ];
    let invoiceTableData = [
      {
        key: 1,
        getTicketTime: '2021-1-4',
        ticketMoney: '1546',
        ticketCompany: '腾讯科技',
        ticket: '普票',
        rate: '15%',
        inputs: '进项',
        node: '备注发票信息',
      },
    ];
    let taxTableData = [
      {
        key: 1,
        date: '2021年2月',
        vatTax: '143',
        vatTaxAdd: '44',
        stampDuty: '45',
        incomeTax: '36',
        deductTime: '2021-2-24',
        deductRate: '5%',
        sum: '656',
        node: '测试数据啊',
        personTax: '74',
        personTaxRate: '2%',
      },
    ];
    let contractTableData = [
      {
        key: 1,
        num: '1',
        signDate: '2021-2-1',
        contractAmount: '45640',
        supplier: '阿里巴巴',
        supplyCont: '用电',
        makeTicketMoney: '40000',
        remainMoney: '5640',
        hasPayMoney: '45000',
        remainUnpayMoney: '640',
        node: '测试数据啊',
      },
    ];
    let that = this;
    time = setInterval(function () {
      if (that.state.btnStyle !== Cookie.get('btnColor')) {
        that.setState({
          btnStyle: Cookie.get('btnColor'),
        });
      }
    }, 500);
    this.setState({
      btnStyle: Cookie.get('btnColor') || 'button-color-daybreak',
      makeTicketTableData,
      beforePayTableData,
      manageFeeTableData,
      projectPayinTableData,
      outmoneyInTableData,
      payoutTableData,
      outmoneyOutTableData,
      invoiceTableData,
      taxTableData,
      contractTableData,
    });
  }
  componentWillUnmount() {
    clearInterval(time);
  }
}
export default withRouter(projectStatements);
